<template>
  <a-form
    ref="aFormValidate"
    v-model="form"
    :formOption="formOption"
    @onSubmit="onSubmit"
    @onRest="onRest"
    :type="type"
  >
    <!-- 自定义方法按钮 -->
    <template #menuForm>
      <!-- 调用组件方法 -->
      <el-button type="primary" @click="aFormValidate.onSubmit()"
        >提交</el-button
      >
      <el-button @click="aFormValidate.onRest()">取消</el-button>
    </template>
    <template #nameLabel>
      <span
        ><span style="color: #f56c6c; margin-right: 4px">*</span
        >自定义城市名称</span
      >
    </template>
    <template #ageLabel>
      <el-button type="danger">年龄名称</el-button>
    </template>
    <!-- 自定义表单插槽 -->
    <template #nameForm="{ disabled, readonly }">
      <el-select v-model="form.name" placeholder="请选择" :disabled="disabled">
        <el-option label="北京" value="1"></el-option>
        <el-option label="上海" value="2"></el-option>
        <el-option label="深圳" value="3"></el-option>
      </el-select>
    </template>
  </a-form>
</template>

<script lang="ts" setup>
import aForm from "@/components/aForm";
const aFormValidate = ref();
const type = ref("add"); // 对增改查使用同一个弹框时传入当前开启的状态 add|edit|view 三种状态， 可以对columns数组中的addDisplay|editDisplay|viewDisplay属性进行控制显隐
const form = ref({
  number: 10,
  radio: "2",
});

const sourceData = ref([
  {
    value: "1",
    label: "Level one 1",
    children: [
      {
        value: "1-1",
        label: "Level two 1-1",
        children: [
          {
            value: "1-1-1",
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    value: "3",
    label: "Level one 3",
    children: [
      {
        value: "3-1",
        label: "Level two 3-1",
        children: [
          {
            value: "3-1-1",
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        value: "3-2",
        label: "Level two 3-2",
        children: [
          {
            value: "3-2-1",
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
]);

const formOption = computed(() => {
  return {
    addBtn: false, // 显隐自带的表单确定按钮 true | false
    resetBtn: false, // 显隐自带的表单重置按钮 true | false
    formLabelWidth: 100, // 表单label宽度 不传默认80
    formLabelPosition: 'right', // 调整form组件文字位置 left|top|right
    labelWidthSpan: 12, // form组件单个宽度 不传默认8
    // menuPosition: 'center', // 调整按钮位置left|center|right 默认left
    columns: [
      {
        prop: "name",
        label: "城市",
        viewDisplay: false, // 查看时隐藏该字段
        editDisplay: false, // 修改时隐藏该字段
        editDisabled: false, // 修改禁用 true|false
        editReadonly: false, // 修改只读 true|false
        addDisabled: false, // 新增禁用 true|false
        addDeadonly: false, // 新增只读 true|false
        formSlot: true, // 使用插槽 true 开启自定义 true | false
        labelSlot: true,
        // placeholder: '', // 自定义占位符
        rules: [{ required: true, message: "城市不能为空", trigger: "change" }],
      },
      {
        prop: "age",
        label: "年龄",
        labelSlot: true,
      },
      {
        prop: "text",
        label: "文本框",
        type: "text",
        showWordLimit: true, // 显示输入限制
        maxlength: 30, // 最大输入限制
        rules: [{ required: true, message: "文本框不能为空", trigger: "blur" }],
      },
      {
        prop: "number",
        label: "数字输入框",
        type: "number",
        value: 1, // 默认初始的值
        min: 1,
        max: 10,
        // disabled: true,
      },
      {
        prop: "treeSelect",
        label: "下拉tree",
        type: "treeSelect",
        // 字典数据value值为字符串
        dicData: sourceData.value,
        multiple: true, // 是否多选
        showCheckbox: true, // 是否开启复选框
        // filterable: false, // 筛选功能true|false 默认false
      },

      {
        prop: "city",
        label: "城市",
        type: "select",
        // 字典数据value值为字符串
        dicData: [
          { label: "南京", value: "1" },
          { label: "上海", value: "2" },
        ],
      },
      {
        prop: "radio",
        label: "性别",
        type: "radio",
        value: "1", // 默认选中的值
        // 字典数据value值为字符串
        dicData: [
          { label: "男", value: "1" },
          { label: "女", value: "2" },
        ],
        // disabled: true,
      },
      {
        prop: "switch",
        label: "类型",
        type: "switch",
        activeText: "开",
        inactiveText: "关",
        // disabled: true,
      },
      {
        label: "日期",
        prop: "date",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD",
        type: "date",
      },
      {
        label: "日期时间",
        prop: "datetime",
        format: "YYYY-MM-DD HH:mm:ss",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        type: "datetime",
      },
      {
        label: "日期时间区间",
        prop: "datetimerange",
        format: "YYYY-MM-DD HH:mm:ss",
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        type: "datetimerange",
        startPlaceholder: "开始时间",
        endPlaceholder: "结束时间",
      },
      {
        prop: "textarea",
        label: "多文本框",
        type: "textarea",
        showWordLimit: true, // 显示输入限制
        maxlength: 30, // 最大输入限制
        rows: 5, // type为textarea类型rows生效
        // rules: [{ required: true, message: '多文本框不能为空', trigger: 'blur' }]
      },
    ],
  };
});

// 获取表单值的方法
function onSubmit() {
  console.log("form", form.value);
}

// 重置表单值的方法
function onRest() {
  aFormValidate.value.ruleFormRefState.resetFields();
}
</script>
